<template>
	<div class="home">

		
		<div class="main">
			
			<div class="coach-list">
				<h2>
					<!-- <span class="fr" @click="handleCoach">全部教练<i class="hicon-2"></i>
					</span> -->
					教练风采
				</h2>
				<div class="fix-padding">
					<scroll-view class="scroll-view" scroll-x="true" :scroll-left="scrollLeft">
						<ul class="list-coach">
							<li v-for="(item, index) in coachArr" :key="index"
							@click="toCoachDetail(item.userId)" >
								<div class="coach-img"><img mode="aspectFill"
										:src="item.portraitPictureFileUrl ? item.portraitPictureFileUrl : 'https://newmefit.cn/resource/gym/base/base1.jpg'" />
								</div>
								<p>{{ item.userName }}</p>
								<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone-btn">sdfs</button> -->
							</li>
						</ul>
					</scroll-view>
				</div>
			</div>
			<div class="course-list">
				<h2>推荐课程</h2>
				<div class="fix-padding1">
					<ul class="list-course">
						<li  v-for="(item, index) in courseList" :key="index"
						@click="toCourseDetail(item.id)">
							<div class="cover"><img mode="aspectFill"
									:src="item.frontImageFileUrl ? item.frontImageFileUrl : 'https://newmefit.cn/resource/gym/base/base2.jpg'">
							</div>
							<div class="course-info">
								<h4>{{ item.courseName }}</h4>
								<p>{{ setCourseMode(item.courseMode) }}</p>
								<p>{{ item.courseTimes }}分钟/节</p>
								<p class="right">
									<span v-for="(o, i) in item.coachList" :key="i" v-if="i < 3">{{ o.userName
									}}</span>
								</p>
							</div>
							<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone-btn">sdfs</button> -->
						</li>
					</ul>
				</div>
			</div>
		</div>

		<view class="login">
			<view>立即</view>
			<view>预约</view>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone-btn">sdfs</button>
		</view>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import navbar from '@/components/navbar/navbar'
import { storeGet, getPublicUrl, listPublicUrl, listStoreEnabled, courseGetList, storeDetailGet } from '@/api/manageApi'
import { getStore, setStore } from '@/util/service'


import { wxLogin }  from '@/api/userApi'
import {courseList, coachList} from './data'
export default {
	components: {
		navbar
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 5000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			bannerList: [
				'../../static/h3.jpg'
			],
			shopArr: [
				{ storeName: '', id: '' }
			],
			isStart: true,
			index: 0,
			storeId: '',
			logoImg: '../../static/logo.png',
			coachArr:  coachList,
			courseList: courseList,
			provinceName: '',
			cityName: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad() {
		if (this.uniToken != '') {
			if (this.userInfo.roleCode) {
				uni.reLaunch({
					url: '/pages/preOrder/preOrderHome',
				})
			} else {
				uni.reLaunch({
					url: '/pages/home/index',
				})
			}
		} 
	},
	onShow() {
		
	},
	methods: {
		toCoachDetail(userId){
			uni.navigateTo({
				url:'/pages/user/coachDetail?userId=' + userId,
			})
		},

		toCourseDetail(id){
			uni.navigateTo({
				url:'/pages/user/courseDetail?id=' + id,
			})
		},

		// 登录相关
		getPhoneNumber (e) {
			
			// 会员登录
			if(e.detail.code){
				this.login(e.detail.code)
			}
			// 教练登录
			// this.loginCoach()
		},
		login (phoneCode) {
			var self = this
			uni.login({
				provider: 'weixin',
				success: function (res) {
					var js_code = res.code	
					var params = {
						code: js_code
					}
					wxLogin(params).then(result => {
						setStore('openId', result.data.openId)
						var userParams = {
							openId: result.data.openId,
							code: phoneCode
						}
						self.$store.dispatch('user/Login',userParams).then(resData => {
							// console.log(resData)
							if(resData.code == 200){
								if(resData.data.loginRes.ext){
									self.$store.dispatch('user/CoachInfo', '').then(response => {
										// console.log(response.data)
										uni.reLaunch({
											url: '/pages/preOrder/preOrderHome',
										})
									})
								} else {
									self.$store.dispatch('user/MemberInfo', '').then(response => {
										uni.reLaunch({
											url: '/pages/home/index',
										})
									})
								}
							}else{
								self.uShowToast(resData.msg)
							}
						})
					}) 
				}
			})
		},
	
		setCourseMode(val) {
			if (val === 1) {
				return '1对1'
			} else if (val === 2) {
				return '1对2'
			} else {
				return ''
			}
		},
		goDetailCoach(item) {
			console.log(1)
		},
		goDetailCourse(item) {
			console.log(2)
		},
		
	

	}
}
</script>

<style lang="scss">
.home {
	background: #F77942;

	.store-select {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		z-index: 10;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-indent: 50rpx;
		background: transparent;
		border-radius: 29rpx;
		border: 1px solid #ddd;
		color: #333;
		font-size: 22rpx;
		opacity: 1;

		span {
			width: 100rpx;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-indent: 0;
		}
	}

	.fr {
		float: right;
	}

	.right {
		text-align: right;
	}

	.hicon-1 {
		width: 116rpx;
		height: 116rpx;
		// display: inline-block;
		// background: url('../../static/logo.png') no-repeat 0 0;
		// background-size: cover;
		border-radius: 50%;
		position: absolute;
		left: 28rpx;
		top: -44rpx;
	}

	.hicon-2 {
		width: 11rpx;
		height: 20rpx;
		display: inline-block;
		position: absolute;
		right: 32rpx;
		top: 37rpx;
		background: url('../../static/right.png') no-repeat 0 0;
		background-size: contain;
	}

	.hicon-3 {
		width: 22rpx;
		height: 24rpx;
		display: inline-block;
		background: url('../../static/phone.png') no-repeat 0 0;
		background-size: cover;
		vertical-align: middle;
		margin-right: 8rpx;
	}

	.hicon-4 {
		width: 22rpx;
		height: 24rpx;
		display: inline-block;
		background: url('../../static/position.png') no-repeat 0 0;
		background-size: cover;
		vertical-align: middle;
		margin-right: 8rpx;
		margin-top: -8rpx;
	}

	.hicon-5 {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		background: url('../../static/map.png') no-repeat 0 0;
		background-size: cover;
		position: absolute;
		right: 32rpx;
		bottom: 42rpx;
		margin-top: -8rpx;
	}

	.hicon {
		width: 84rpx;
		height: 84rpx;
		display: inline-block;
		position: relative;
		margin-bottom: 8rpx;
		margin-top: 32rpx;
	}

	.hicon-6 {
		background: url('../../static/icon-1.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-7 {
		background: url('../../static/icon-2.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-8 {
		background: url('../../static/icon-3.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-9 {
		background: url('../../static/icon-4.png') no-repeat 0 0;
		background-size: cover;
	}

	.hicon-10 {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
		position: absolute;
		left: 16rpx;
		top: 12rpx;
		background: url('../../static/tab.png') no-repeat 0 0;
		background-size: cover;
	}

	.banner {
		width: 100%;
		height: 500rpx;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 500rpx;
			text-align: center;
		}
	}

	.main {
		padding: 24rpx;

		.shop-info {
			width: 100%;
			height: 230rpx;
			background: url('https://newmefit.cn/resource/gym/base/base7.png') no-repeat 0 0;
			background-size: cover;
			border-radius: 25rpx;
			padding: 20rpx 32rpx 34rpx 28rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 24rpx;

			h3 {
				width: 631rpx;
				font-size: 32rpx;
				color: #1E1E1E;
				line-height: 56rpx;
				text-indent: 130rpx;
				margin-bottom: 22rpx;
			}

			p {
				width: 513rpx;
				font-size: 24rpx;
				color: #575757;
				line-height: 30rpx;
				margin-bottom: 16rpx;
			}

			.fix-p {
				margin-bottom: 22rpx;
			}
		}

		.menu-tab {
			width: 100%;
			height: 188rpx;
			background: url('https://newmefit.cn/resource/gym/base/base8.png') no-repeat 0 0;
			background-size: cover;
			border-radius: 25rpx;
			margin-bottom: 24rpx;

			.list-menu {
				display: flex;

				li {
					width: 25%;
					text-align: center;

					p {
						font-size: 24rpx;
						color: #1E1E1E;
					}
				}
			}
		}

		.coach-list {
			width: 100%;
			height: 382rpx;
			background: url('https://newmefit.cn/resource/gym/base/base9.png') no-repeat 0 0;
			background-size: contain;
			border-radius: 25rpx;
			margin-bottom: 24rpx;
			padding: 26rpx 0 32rpx 0rpx;
			box-sizing: border-box;
			position: relative;

			h2 {
				overflow: hidden;
				text-indent: 28rpx;
				font-size: 30rpx;

				span {
					margin-right: 28rpx;
					padding-right: 38rpx;
					font-weight: normal;
					font-size: 24rpx;
				}
			}

			.fix-padding {
				padding: 30rpx 0 22rpx 28rpx;
				background: #FFFFFF;
				border-radius: 0 0 25rpx 25rpx;
			}

			.scroll-view {
				.list-coach {
					display: flex;

					li {
						position: relative;
						width: 210rpx;
						height: 258rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
						border-radius: 15rpx;
						padding: 10rpx;
						box-sizing: border-box;
						margin-right: 28rpx;

						.coach-img {
							width: 190rpx;
							height: 190rpx;
							margin-bottom: 15rpx;
							text-align: center;
							line-height: 190rpx;
						}

						img {
							max-width: 100%;
							max-height: 100%;
							vertical-align: middle;
							border-radius: 15rpx;
						}

						p {
							font-weight: 500;
							font-size: 24rpx;
							color: #1E1E1E;
							text-align: center;
						}
					}
				}
			}
		}

		.course-list {
			width: 100%;
			background: url('https://newmefit.cn/resource/gym/base/base10.png') no-repeat 0 0;
			background-size: contain;
			border-radius: 25rpx;
			padding: 26rpx 0 0 0;
			box-sizing: border-box;
			position: relative;

			h2 {
				overflow: hidden;
				// margin-bottom: 32rpx;
				text-indent: 28rpx;
				font-size: 30rpx;

			}

			.fix-padding1 {
				padding: 22rpx 28rpx 26rpx 28rpx;
				background: #fff;
				border-radius: 0 0 25rpx 25rpx;
			}

			.list-course {
				width: 100%;

				li {
					position: relative;
					width: 100%;
					display: flex;
					margin-bottom: 52rpx;

					.cover {
						width: 210rpx;
						height: 166rpx;
						margin-right: 20rpx;
						text-align: center;
						line-height: 160rpx;
						background: #f5f5f5;
						border-radius: 15rpx;

						img {
							max-width: 100%;
							max-height: 100%;
							vertical-align: middle;
							border-radius: 15rpx;
						}
					}

					.course-info {
						h4 {
							font-size: 29rpx;
							color: #1E1E1E;
							margin-bottom: 14rpx;
							margin-top: -6rpx;
							width: 411rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: normal;
						}

						p {
							font-size: 25rpx;
							color: #838383;
							margin-bottom: 12rpx;

							span {
								min-width: 86rpx;
								height: 36rpx;
								padding: 0 10rpx;
								background: #FFF4EF;
								border-radius: 10rpx;
								font-size: 22rpx;
								color: #FF5A20;
								display: inline-block;
								text-align: center;
								margin-right: 10rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}

	}
}
.phone-btn{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	z-index: 10;
}
.login{
	position: fixed;
	right: 50rpx;
	bottom: 50rpx;
	background: #F77942;
	color: #fff;
	height: 180rpx;
	width: 180rpx;
	border-radius: 50%;
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.8);
	text-align: center;
	font-size: 50rpx;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
}
</style>
